<template>
  <div class="app-container">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="mini">
            <el-form-item>
                <el-input v-model="queryItems[0].value" :placeholder="$t('contract.contractNo')" clearable/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryItems[1].value" :placeholder="$t('contract.contractName')" clearable/>
            </el-form-item>
            <el-form-item>
                <el-select
                        v-model="queryItems[4].value"
                        filterable
                        remote
                        clearable
                        reserve-keyword
                        placeholder="请输入合同所属企业名称关键字"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        style="width: 320px"  >
                    <el-option
                            v-for="item in companyList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="dateValue"
                        @change="changeDate"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t('query') }}</el-button>
                <el-button type="primary" @click="exportExcel">{{ $t('export') }}</el-button>
            </el-form-item>
        </el-form>
        <el-table
                size="mini"
                v-loading="dataListLoading"
                :data="dataList"
                border
                stripe
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
            <el-table-column prop="contractNo" :label="$t('contract.contractNo')" header-align="center" align="center"/>
            <el-table-column prop="contractName" :label="$t('contract.contractName')" header-align="center" align="center"/>
            <el-table-column prop="amount" :label="$t('contract.amount')" header-align="center" align="center"/>
            <el-table-column prop="contractAmount" :label="$t('contract.contractAmount')" header-align="center" align="center"/>
            <el-table-column prop="customerName" :label="$t('contract.customerName')" header-align="center" align="center"/>
            <el-table-column prop="clientName" :label="$t('contract.clientName')" header-align="center" align="center"/>
            <el-table-column prop="createName" label="创建人" header-align="center" align="center" width="120"/>
            <el-table-column prop="createTime" :label="$t('createTime')" header-align="center" align="center"/>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                slot="footer"
                :current-page="page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="limit"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
        </el-pagination>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [ mixinViewModule ],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/manager/statistics/myContractStatisticsPage',
        getDataListIsPage: true,
        deleteIsBatch: false
      },
      loading: false,
      dataForm: {

      },
      companyList: [],
      dateValue: [],
      queryItems: [
        {
          field: 'contractNo',
          as: 'EQ',
          value: ''
        },
        {
          field: 'contractName',
          as: 'LIKE',
          value: ''
        },
        {
          field: 'createTime',
          as: 'GE',
          value: ''
        },
        {
          field: 'createTime',
          as: 'LE',
          value: ''
        },
        {
          field: 'clientId',
          as: 'EQ',
          value: ''
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      columns: [
        {
          label: '合同编号',
          prop: 'contractNo'
        },
        {
          label: '合同名称',
          prop: 'contractName'
        },
        {
          label: '合同金额',
          prop: 'amount'
        },
        {
          label: '合同付费金额',
          prop: 'contractAmount'
        },
        {
          label: '合同签署人',
          prop: 'customerName'
        },
        {
          label: '合同所属企业',
          prop: 'clientName'
        },
        {
          label: '合同创建时间',
          prop: 'createTime'
        }
      ]
    }
  },
  methods: {
    changeDate: function (value) {
      if (value === null) {
        this.queryItems[2].value = ''
        this.queryItems[3].value = ''
      } else {
        this.queryItems[2].value = value[0] + ' 00:00:00'
        this.queryItems[3].value = value[1] + ' 23:59:59'
      }
      this.page = 1;
    },
    exportExcel: function () {
      this.$axios.get('/statistics/exportMyContractStatistics?queryItems=' + this.createQueryParams(this.queryItems)).then(res => {
        if (res !== null && res !== undefined) {
          this.$export.excel({
            columns: this.columns,
            data: res,
            title: '我的合同'
          }).then(() => {
            this.$message({
              message: '导出表格成功',
              type: 'success'
            })
          })
        }
      }).catch(() => {
      })
    },
    createQueryParams: function (queryItems) {
      let queryParams = ''
      if (queryItems.length > 0) {
        for (let i = 0; i < queryItems.length; i++) {
          let queryItem = queryItems[i]
          queryParams = queryParams + queryItem.field + ',' + queryItem.as + ',' + queryItem.value + ';'
        }
      }
      return queryParams
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        this.getCompanyList(query)
      } else {
        this.companyList = []
      }
    },
    getCompanyList (queryName) {
      return this.$axios.get('/company/page', {
        params: {
          order: 'ASC',
          orderField: 'createTime',
          current: 1,
          size: 20,
          listMode: true,
          queryItems: 'name,LIKE,' + queryName
        }
      }).then(res => {
        this.loading = false
        this.companyList = res.records
      }).catch(() => {
      })
    }
  }
}
</script>
